<template>
    <view class="page">
        <view class="content">
            <view style="padding: 20rpx;">
                <text style="font-size: 16px;font-weight: bold">房满租现金券 :</text>
                <text>可选1张</text>
            </view>
            <view class="box" v-for="(item,index) in canUseCoupons" @click="selectCoupon(item)">
                <view class="day">
                    <text style="font-size: 60rpx;font-weight: bold;color: #A6955E">{{item.c_time}}天</text>
                    <text style="font-size: 26rpx">无门槛</text>
                    <u-gap height="10rpx"></u-gap>
                </view>
                <view class="desc">
                    <text style="font-size: 30rpx;color: #A6955E">{{item.title}}</text>
                    <text style="font-size: 26rpx;color: #666">有效期至：{{item.end_date}}</text>
                    <view @click="use(item)">
                        <u-text :suffixIcon="item.down?'arrow-down':'arrow-up'" margin="10rpx 0" type="info"
                                size="22rpx" iconStyle="font-size: 22rpx; margin-left:10rpx" text="使用说明"></u-text>
                    </view>
                </view>
                <view class="radio">
                    <he-radio :is-change="false" v-model="item.is_selected"></he-radio>
                </view>
            </view>

            <view style="padding: 20rpx">
                <u-button type="primary" v-if="!loadmore" :plain="true" text="3张不可用现金券" @click="loadUnUseCoupon"></u-button>
            </view>

            <template v-for="(item,index) in cantUseCoupons" v-if="loadmore">
                <view class="box" >
                    <view class="day">
                        <text style="font-size: 60rpx;font-weight: bold;color: #A6955E">{{item.c_time}}天</text>
                        <text style="font-size: 26rpx">无门槛</text>
                        <u-gap height="10rpx"></u-gap>
                    </view>
                    <view class="desc">
                        <text style="font-size: 30rpx;color: #A6955E">{{item.title}}</text>
                        <text style="font-size: 26rpx;color: #666">有效期至：{{item.end_date}}</text>
                        <view @click="use(item)">
                            <u-text :suffixIcon="item.down?'arrow-down':'arrow-up'" margin="10rpx 0" type="info"
                                    size="22rpx" iconStyle="font-size: 22rpx; margin-left:10rpx" text="使用说明"></u-text>
                        </view>
                    </view>
                    <view class="radio">
                        <he-radio :is-change="false" v-model="item.is_selected"></he-radio>
                    </view>
                </view>
                <u-alert type="warning" :show-icon="true" :description="item.disable_msg"></u-alert>
                <u-gap height="10"></u-gap>
            </template>
        </view>

        <u-gap height="50"></u-gap>
        <view class="safe-area-inset-bottom"></view>

        <view class="fixed">
            <view class="footer">
                <view class="btn-item" style="width: 100px" @click="callbackCoupon">
                    <u-button text="确定" shape="circle" type="primary"></u-button>
                </view>
                <view class="btn-item">
                    <view>
                        <text class="grid-text" style="color: #000;font-size: 14px;padding: 0">已选择{{selectCouponCount}}张，可减</text>
                        <text class="grid-text" style="color: #E60B30;font-size: 22px;padding: 10rpx">{{selectCouponDays}}天</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import heRadio from "../../../components/he-radio.vue";
    export default {
        components:{
            heRadio
        },
        name: "select",
        data() {
            return{
                canUseCoupons:[],
                cantUseCoupons:[],
                down: true,
                loadmore: false,
                selectCouponCount: 0,
                selectCouponDays: 0,
                selectCouponId: 0,
            };
        },
        onLoad(option){
            // this.getCouponList({
            //     u_id: uni.getStorageSync('u_id'),
            //     type: 1
            // });
            for (let i = 0; i < option.coupon_list.length; i++) {
                option.coupon_list[i].down = true;
                option.coupon_list[i].is_selected = false;
                if (option.coupon_list[i].disable === 1) {
                    this.cantUseCoupons.push(option.coupon_list[i]);
                }else{
                    this.canUseCoupons.push(option.coupon_list[i]);
                }
            }
        },
        methods:{
            use(item){
                item.down = !item.down;
            },
            // getCouponList(params){
            //     uni.$u.http.get('/api.php/UserClinet/get_user_coupon' + uni.$u.queryParams(params)).then(res => {
            //         uni.hideLoading();
            //         for (let i = 0; i < res.length; i++) {
            //             res[i].down = true;
            //             res[i].is_selected = false;
            //         }
            //         this.coupons = res;
            //     });
            // },
            selectCoupon(item){
                for (let i = 0; i < this.coupons.length; i++) {
                    this.coupons[i].is_selected = false;
                }
                item.is_selected = !item.is_selected;
                this.selectCouponCount = 1;
                this.selectCouponDays = item.c_time;
                this.selectCouponId = item.id;
            },
            loadUnUseCoupon(){
                this.loadmore = true;
            },
            callbackCoupon(){
                uni.$emit('coupon', {coupon_id: this.selectCouponId});
                uni.navigateBack({delta: 1});
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        /*background-color: RGBA(245, 245, 245, 1);*/
        background-color: #f3f4f6;
    }
    .content{
        /*padding: 20rpx;*/
    }

    .box{
        width: 100%;
        height: 220rpx;
        @include flex;
        background-image: url('../../../static/coupon-bg.png');
        background-size: contain;
        background-repeat: no-repeat;

        .day{
            width: 28%;
            /*background-color: #FF7F00;*/
            @include flex(column);
            align-items: center;
            justify-content: center;
        }
        .desc{
            width: 55%;
            /*background-color: #33A7FF;*/
            padding-left: 20rpx;
            @include flex(column);
            align-items: flex-start;
            justify-content: center;
        }
        .radio{
            width: 10%;
            @include flex(column);
            align-items: center;
            justify-content: center;
        }
    }


    .fixed{
        width: 100%;
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1rpx solid #c0c4cc;
    }
    .footer{
        display: flex;
        flex-direction: row-reverse;
    }

    .btn-item {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-sizing: border-box;
        display: flex;
        float: left;
        margin-right: 40rpx;
        margin-bottom: 0;
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
    }
</style>